﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dreamer Blog - 后台管理系统</title> 
    <!-- bootstrap 3.0.2 -->
    <link href="/resource/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- font Awesome -->
    <link href="/resource/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
    <link href="/resource/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- iCheck for checkboxes and radio inputs -->
    <link href="/resource/css/iCheck/all.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="/resource/css/style.css" rel="stylesheet" type="text/css" />
    <link href="/resource/js/editor.md-master/css/editormd.css" rel="stylesheet" type="text/css"/>
    <link href="/resource/js/tagit/jquery.tagit.css" rel="stylesheet" type="text/css"/>
    <link href="/resource/js/tagit/tagit.ui-zendesk.css" rel="stylesheet" type="text/css"/>
    <link href="/resource/js/bootstrap-treeview/bootstrap-treeview.min.css" rel="stylesheet" type="text/css"/>
</head>

<body>
	<div class="row">
	    <div class="col-md-12">
	    	<h1 class="panel-heading">编辑导航</h1>
	        <!--breadcrumbs start -->
	        <ul class="breadcrumb">
	            <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
	            <li><a href="#">Dashboard</a></li>
	            <li class="active">Current page</li>
	        </ul>
	        <!--breadcrumbs end -->
	    </div>
	</div>
	<div class="row">
		<div class="col-lg-12">
			<section class="panel">
				<header class="panel-heading tab-bg-dark-navy-blue">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a data-toggle="tab" href="#baseinfo"><i class="fa fa-cog"></i>基本设置</a>
                        </li>
                        <li class="">
                            <a data-toggle="tab" href="#fields"><i class="fa fa-bars"></i>页面管理</a>
                        </li>
                    </ul>
                </header>
                <div class="panel-body">
                    <div class="tab-content">
                        <div id="baseinfo" class="tab-pane active">
                            <form class="col s12" id="form1" th:object="${navigate}" th:action="@{/admin/navigate/edit}" onsubmit="return validateForm();" method="post">
								<input name="id" id="id" type="hidden" th:value="*{id}" />
								<div class="form-group form-control-medium">
									<label for="navName">导航名称：</label>
									<input id="navName" name="navName" type="text" class="form-control" th:value="*{navName}">
								</div>
								<div class="form-group form-control-medium">
		                            <label for="tableName">展示位置：</label>
		                            <select class="form-control m-b-10" name="position">
		                                <option value="TOP" th:selected="${navigate.position} == 'TOP'">TOP</option>
		                                <option value="MAIN" th:selected="${navigate.position} == 'MAIN'">MAIN</option>
		                                <option value="BOTTOM" th:selected="${navigate.position} == 'BOTTOM'">BOTTOM</option>
		                                <option value="OTHER" th:selected="${navigate.position} == 'OTHER'">OTHER</option>
		                            </select>
								</div>
								<div class="form-btn-group-left">
					            	<button type="submit" class="btn btn-info">保存</button>
					            </div>
							</form>
                        </div>
                        <div id="fields" class="tab-pane">
				            <div class="panel-body">
				            	<div class="row">
				            		<div class="col-lg-3">
				            			<section class="panel">
				                            <header class="panel-heading">菜单树</header>
	                            			<div class="panel-body table-responsive">
					            				<div id="tree"><div>
					            			</div>
				            			</section>
				            		</div>
				            		<div class="col-lg-9">
				            			<section class="panel">
				            				<header class="panel-heading">下级菜单</header>
				            				<div class="panel-body">
								                 <button id="selectPages" class="btn btn-primary btn-addon btn-sm" data-toggle="modal" onclick="selectPages();">选择页面</button>
								            </div>
								            <form class="col s12" id="orderForm" th:action="@{/admin/navigate/updateOrderBy}" onsubmit="return validateForm();" method="post">
								            	<input name="navId" type="hidden" th:value="${navigate.id}" />
												<input type="hidden" name="id" id="rightPageId" class="flat-grey list-child" value="" />
						            			<table class="table table-hover">
													<thead>
														<tr>
															<th width="150">名称</th>
															<th width="150">模版</th>
															<th width="150">路径</th>
															<th width="150">排序</th>
															<th style="width:100px;">操作</th>
														</tr>
													</thead>
													<tbody>
														<tr>
															<td id="rightPageName"></td>
															<td id="rightPageTemp"></td>
															<td id="rightPageUrl"></td>
															<td>
																<input id="rightOrderBy" name="orderBy" type="text" class="form-control input-sm" value="0" style="width:50px;height:20px;">
															</td>
															<td>
																<button type="button" class="btn btn-xs btn-info" onclick="updateOrderBy();">更新排序</button>
																<a href="javascript:void(0)" data-toggle="modal" class="btn btn-xs btn-danger" onclick="confrimRemove()">删除</a>
															</td>
														</tr>
													</tbody>
												</table>
											</form>
										</section>
				            		</div>
				            	</div>
				            </div>
							
                        </div>
                    </div>
                </div>
			</section>
		</div>
	</div>
	<div aria-hidden="true" aria-labelledby="myModalLabel1" role="dialog" tabindex="-1" id="select-dialog" class="modal fade">
            <div class="modal-dialog" style="width: 680px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                        <h4 class="modal-title">选择页面</h4>
                    </div>
                    <div class="modal-body">
						<div class="row">
							<input id="navigateId" type="hidden" th:value="${navigate.id}" />
                            <div class="checkbox-item" th:each="page : ${pages}">
	                            <label class="checkbox-inline">
	                                <input type="checkbox" name="pages" th:value="${page.id}" th:text="${page.pageName}"/>
	                            </label>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                    <div class="modal-footer">
                    	<button type="button" class="btn btn-primary btn-addon btn-sm" onclick="saveNavPage();">确定</button>
                    	<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
	<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="remove-dialog" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                        <h4 class="modal-title">操作提示？</h4>
                    </div>
                    <div class="modal-body">
                    	<div class="alert alert-block alert-danger">
	                        <strong>注意!</strong> 字段删除后，如有调用则会报错且删除后不可恢复.
	                    </div>
						<h4 class="modal-title">您确定要删除该记录吗？</h4>
						<input type="hidden" id="cacheID" />
                    </div>
                    <div class="modal-footer">
                    	<button type="button" class="btn btn-primary btn-addon btn-sm" onclick="remove();">确定</button>
                    	<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
	<script src="/resource/js/jquery.min.js" type="text/javascript"></script>
	<!-- Bootstrap -->
    <script src="/resource/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="/resource/js/bootstrap-treeview/bootstrap-treeview.min.js"></script>
    <script type="text/javascript" th:inline="javascript">
    	var treeList = [[${treeList}]];
    	var currentSelected = "-1";
    	var treedata = [{
           	id: '-1',
            text: [[${navigate.navName}]],
            href: '#',
            tags:['ROOT'],
            nodes:treeList
    	}];
	    window.onload = function(){
	    	buildTree(treedata);
		}
	    
	    function buildTree(data){
	    	$('#tree').treeview({
	    		data: data,
	    		showTags: true,
	    		onNodeSelected: function(event, node){
	    			currentSelected = node.id;
	    			if(currentSelected == '-1'){
	    				$("#rightPageId").val(node.id);
	    				$("#rightPageName").html(node.text);
	    				$("#rightPageTemp").html("无");
	    				$("#rightPageUrl").html("无");
	    				$("#rightOrderBy").val("0").attr("readonly","readonly");
	    				return;
	    			}
	    			$("#rightPageId").val("").val(node.id);
	    			$("#rightPageName").html("").html(node.text);
	    			$("#rightPageTemp").html("").html(node.pageTemp);
	    			$("#rightPageUrl").html("").html(node.pageUrl);
	    			$("#rightOrderBy").val("").val(node.orderBy).removeAttr("readonly");
	    		}
	    	});
	    	$('#tree').treeview('expandAll', null);  
	    }
    
	    function selectPages(){
	    	$("#select-dialog").modal();
	    }
	    
	    function saveNavPage(){
	    	var navigateId = $("#navigateId").val();
	    	var pages = $("input[name='pages']:checked");
	    	var navPages = new Array();
	    	for(var i = 0;i < pages.length;i++){
	    		var temp = pages[i];
	    		var page = {navId:navigateId,pageId:$(temp).val(),parentId:currentSelected};
	    		navPages.push(page);
	    	}
	    	
	    	$.ajax({
	    		type : "post",
	    		url : "/admin/navigate/saveNavPage",
	    		async: false,
	    		data : JSON.stringify(navPages),
	    		dataType : "json",
	    		contentType : "application/json; charset=utf-8",
	    		success : function(data) {
	           		if(data != null){
	           			var tdata = [{
	           				id: '-1',
	           	            text: [[${navigate.navName}]],
	           	            href: '#',
	           	            tags:['ROOT'],
	           	            nodes:data
	           			}];
		           		buildTree(tdata);
	           		}
	           		$("#select-dialog").modal('hide');
	    		},
	    		error : function(xmlHttpRequest, textStatus, errorThrown) {
	    		}
	    	});
	    }
	    
	    function updateOrderBy(){
	    	$.post($("#orderForm").attr("action"),$("#orderForm").serialize(),function(data){
	    		var tdata = [{
       				id: '-1',
       	            text: [[${navigate.navName}]],
       	            href: '#',
       	            tags:['ROOT'],
       	            nodes:JSON.parse(data)
       			}];
           		buildTree(tdata);
	    	});
	    }
	    
	    function validateForm(){
	    	return true;
	    }
	    
	    function toAdd(fid){
			window.location.href = "/admin/field/toAdd?formId="+fid;	
		}
	    
	    function confrimRemove(){
	    	var id = $("#rightPageId").val();
	    	if(id == null || id == '' || id == "undefined"){
	    		return;
	    	}
			$("#remove-dialog").modal();
			$("#cacheID").val(id);
		}
		
		function remove(){
			var currentID = $("#cacheID").val();
			var navId = $("#navigateId").val();
			var navPage = {id:currentID,navId:navId}
			$.post("/admin/navigate/deletePage",navPage,function(data){
	    		var tdata = [{
       				id: '-1',
       	            text: [[${navigate.navName}]],
       	            href: '#',
       	            tags:['ROOT'],
       	            nodes:JSON.parse(data)
       			}];
           		buildTree(tdata);
				$("#remove-dialog").modal('hide');
	    	});
		}
    </script>
</body>
</html>